<template>
    <div class="menu_wrapper" :style="{
        top,
        left
    }">
        <div class="menu_item" v-for="(item, index) in menuList" :key="index" @mousedown="menuClick(item)">
            <svg class="Icon">
                <use :xlink:href="item.icon"></use>
            </svg>
            {{
                item.btnName }}
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    top: String,
    left: String,
    menuList: Array
})
const menuClick = (item) => {
    item.event && item.event()
}
</script>
<style lang="less" scoped>
.menu_wrapper {
    position: fixed;
    background: #fff;
    box-shadow: var(--el-box-shadow-lighter);
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    padding: 8px 0;
    border-radius: 2px;
    backdrop-filter: blur(16px);

    .menu_item {
        padding: 0 12px;
        line-height: 32px;
        cursor: pointer;

        &:hover {
            color: rgba(0, 0, 0, 1);
        }
    }
}
</style>